iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
自我挑戰組

React 開發者的 TypeScript 探索之旅系列 第 27

【 Day 27 】Record, Pick, Omit

  • 分享至 

  • xImage
  •  

透過使用 TypeScript 的 Utility Types,可以更靈活地操控型別,特別是在處理複雜的資料結構時。

接下來的這幾天,我們要來介紹 TypeScript Utility Types。TypeScript 提供的這些工具類型可以幫助我們更高效地開發和維護程式碼。今天先來介紹其中最經典的三種 utility,那就是 RecordPickOmit,這些是常用來改造物件型別的工具,使用得當可以大大提升程式碼的可讀性與擴展性。


Record

Record 是用來將一組鍵對應到一組值的工具,適合用於當我們需要動態創建物件,且物件的鍵和值都要有明確的型別時。我們可以用它來定義某些動態的資料結構,確保物件的鍵和值都符合預期的型別。

例如,我們要保存餐廳的評價,可以使用 Record 將餐廳的 id 對應到它的 rating

type RestaurantRatings = Record<number, number>

const ratings: RestaurantRatings = {
  1: 4.5,
  2: 3.8,
  3: 5.0
}

你也可以用 Record 來儲存餐廳的營業狀態:

type RestaurantStatus = Record<string, boolean>

const status: RestaurantStatus = {
  "RestaurantA": true,  // 開放營業
  "RestaurantB": false  // 關閉中
}

Pick

介紹完 Record 後,我們來看看另一個常用的工具型別——Pick,它讓我們從現有的型別中挑選出部分屬性。這可以幫助我們只選取需要的部分屬性。

假設現在有一個型別定義如下:

type Restaurant = {
  id: number
  name: string
  address: string
  phone: string
  rating: number
  image: string
  description: string
}

若在某些情形下,我們只需要 name 以及 image 屬性,那麼就可以使用 Pick 來挑選:

type Restaurant = {
  id: number
  name: string
  address: string
  phone: string
  rating: number
  image: string
  description: string
}

// 只需要餐廳的名稱和圖片作為預覽展示,不需要其他詳細資訊
type RestaurantPreview = Pick<Restaurant, 'name' | 'image'>

Omit

OmitPick 相反,用來排除某些屬性。它與 Pick 的應用取決於你的需求,若今天你並不想讓用戶看見餐廳的 id,那麼你就可以使用 Omit 來排除 id

type Restaurant = {
  id: number
  name: string
  address: string
  phone: string
  rating: number
  image: string
  description: string
}

type RestaurantForClient = Omit<Restaurant, 'id'>

透過這三種常見的 Utility Types,我們可以輕鬆地操控和改造型別。明天我們將繼續探索更多有用的 TypeScript 工具型別。


上一篇
【 Day 26 】如何用 TypeScript 建立通用的 Input 元件
下一篇
【 Day 28 】Partial, Required, Readonly
系列文
React 開發者的 TypeScript 探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言